<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>第一次课——html标签与属性</title>
  <style>
    body {
      background-image: url(./img/background.jpg);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      /* 固定于页面，不随滚动而滚动，scroll相反 */
      background-repeat: no-repeat;
      /* repeat-x，repeat-y，repeat */

      /* w3c演示背景 */
      padding: 20px;
    }

    img {
      width: 200px;
    }

    span {
      color: white;
    }

    .photo,
    .web {
      background-color: rgba(0, 0, 0, 0.7);
      padding: 20px;
      border-radius: 10px;
      border: 1px white solid;
    }

    .photo {
      margin-bottom: 15px;
    }
  </style>
</head>

<body>
  <div class="photo">
    <div class="main_head">
      <span>图片收藏</span>
    </div>
    <ul>
      <li>
        <img src="./img/image1.jpeg" alt="" />
        <span>红色素材</span>
      </li>
      <li>
        <img src="./img/image2.jpg" alt="" />
        <span>随手拍</span>
      </li>
      <li>
        <img src="./img/image3.png" alt="" />
        <span>一个男人罢了</span>
      </li>
    </ul>
  </div>
  <div class="web">
    <div class="main_head">
      <span>网址收藏</span>
    </div>
    <ul>
      <li>
        <span>百度</span>
        <a href="https://www.baidu.com/">点击这里</a>
      </li>
      <li>
        <span>阿里巴巴</span>
        <a
          href="https://www.jd.com/?cu=true&utm_source=baidu-search&utm_medium=cpc&utm_campaign=t_262767352_baidusearch&utm_term=106807362512_0_a635feff036441a08cb2995c8d167292">点击这里</a>
      </li>
      <li>
        <span>W3C</span>
        <a href="https://www.w3school.com.cn/">点击这里跳转</a>
      </li>
    </ul>
  </div>
</body>

</html>
<!--
    涉及到的html标签
    !DOCTYPE html
    html
    meta
    title
    body
    div
    span
    ul
    li
    img
    a
    选择器拓展
    元素选择器、id选择器、类选择器、通用选择器（*）、分组选择器（,）
    涉及到的样式属性
    盒子相关介绍 margin padding width box-sizing
    background系列 color size position
    border系列 radiu border

-->